<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
</script>
<style scoped>
     #tcCatgId_tree{
        height: 110px !important;
    }
    .layui-layer-admin .layui-layer-content{
        padding: 0 20px;
    }
    .layui-form-label {
        width: 80px;
        font-size: 10px;
    }
    .footer {
        text-align: center;
    }

    .layui-btn-container .layui-btn+.layui-btn {
        margin-left: 40px;
    }

    .layui-input {
        width: auto;
    }

    #layuiadmin-form-tags {
        text-align: center;
    }

    .footer {
        justify-content: center;
    }

    .layui-form-item {
        margin-top: 15px;
    }

    #showData {
        margin-top: 10px;
    }

    .addNewProject {
        font-size: 13px;
        font-weight: bold;
    }
    .layui-input{
        width:161px;
    }
    .FalsesTag{
        color: red;
        font-size: 18px;
        position: absolute;
        left: 6px;
        top: 4px;
    }
</style>

<div class="layui-form row" lay-filter="layuiadmin-form-tags" id="layuiadmin-form-tags">

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalsesTag">*</i>项目名称：</label>
        <div class="layui-input-block">
            <input type="text" name="tcMaintName" placeholder="项目名称" autocomplete="off" class="layui-input"
                id="one_llp" lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalsesTag">*</i>保养部位：</label>
        <div class="layui-input-block">
            <input type="text" name="tcMaintPart" placeholder="保养部位" autocomplete="off" class="layui-input"
                id="two_llp" lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalsesTag">*</i>保养说明：</label>
        <div class="layui-input-block">
            <textarea name="tcMaintDsc" required  class="layui-textarea"
                id="three_llp" lay-verify="required"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalsesTag">*</i>文档类型：</label>
        <div class="layui-input-block">
            <input type="text" id="tcCatgId" name="" class="layui-input" autocomplete="off" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalsesTag">*</i>相关文档：</label>
        <div class="layui-input-block">
            <select type="text" id="treeSelect" name="tcMaintDocid" placeholder="设备文档" autocomplete="off" lay-search disabled lay-verify="required">
            </select>
        </div>
    </div>
    </table>
    <div class="footer layui-btn-container">
        <div class="layui-form-item">
            <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-filter="layuiadmin-app-form-submit"
                lay-submit>确定</button>
            <button class="btn2 layui-btn layui-btn-radius layui-btn-primary" style="text-align: center;">取消</button>
        </div>
    </div>
</div>

  
<script>
    layui.use(['admin', 'form', 'api', 'table', 'laytpl', 'utill', 'laydate', 'treeSelect'], function () {
        var $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            jquery = layui.jquery,
            laydate = layui.laydate,
            form = layui.form,
            layer = layui.layer,
            utill = layui.utill,
            treeSelect = layui.treeSelect;
            function wd(data){
                if(data){
                    $('#treeSelect').removeAttr('disabled');
                    admin.req({
                        url: api.host + api.sbwd.doSelectList,
                        type: 'post',
                        contentType: 'application/json',
                        data:JSON.stringify({
                            tcCatgId: data,
                            pageNum: 1,
                            pageSize: 10000
                        }),
                        done: function (res) {
                            var str = '<option value=""></option>'
                            for (let index = 0; index < res.data.list.length; index++) {
                                if(res.data.list[index] == null){
                                    continue
                                }else{
                                    str = str + `<option value="${res.data.list[index].tcDocId}">${res.data.list[index].tcDocName}</option>`
                                }
                            }
                            $('#treeSelect').append(str)
                            form.render();
                        }
                    });
                }
            }
            admin.req({
                url: api.host + api.selectoption,
                done: function (res) {
                    function transferKey(odata) {
                        odata.forEach(obj => {
                            obj.title = obj.tcCatgName
                            obj.children = obj.childList
                            delete obj["tcCatgName"]
                            delete obj["childList"]
                            if (obj.children instanceof Array) {
                                transferKey(obj.children)
                            }
                        })
                        return odata
                    }
                    odataArr = transferKey(res.data)
                    treeSelect.render({
                        elem: "#tcCatgId",
                        node: odataArr,
                        done: (data) => {
                            $("#tcCatgId").val(data.data.title);
                            wd(data.data.tcCatgId);
                        }
                    })
                }
            });
    });
</script>